<template>
	<div class="app-container">
		<div class="header">
			<h2 class="title">短信群发</h2>
		</div>
		<el-row  :gutter="10">
			<el-form ref="smsInfo" :inline="true" :model="form" label-width="80px"   >
				<el-form-item label="短信内容">
				<el-input v-model="smsInfo.smsContent" style="width: 95vh;"></el-input>
				</el-form-item>
				<!-- <el-form-item label="会议时间">
					<el-date-picker type="datetime" placeholder="选择日期"  value-format="yyyy-MM-dd HH:mm:ss"  v-model="meetingInfo.beginTime"></el-date-picker>
				</el-form-item> -->
				<el-button type="primary" @click="handleSendRequest" >发送</el-button>
				<el-button type="danger" @click="backRoom">返回</el-button>
			</el-form>
		</el-row>
		<el-row  :gutter="50">
			<el-col  :span="5">
			<el-form ref="form" :model="form" label-width="80px" label-position="top">
				<el-form-item label="人员选择">
				<el-tree
					:data="treeData"
					show-checkbox
					:check-strictly="true"
					default-expand-all
					node-key="id"
					:default-expanded-keys="[2, 3]"
					:default-checked-keys="[5]"
					:props="defaultProps"
					@check="treeCheck"
					ref="tree">
				</el-tree>
				</el-form-item>
			</el-form>
			</el-col>
			<el-col :span="17">
					<el-table :data="userList" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="50" align="center" />
				
						<el-table-column
						label="用户名称"
						align="center"
						key="userName"
						prop="userName"
						:show-overflow-tooltip="true"
						/>
						<el-table-column
						label="用户昵称"
						align="center"
						key="nickName"
						prop="nickName"
						:show-overflow-tooltip="true"
						/>
						<el-table-column
						label="部门"
						align="center"
						key="deptName"
						prop="dept.deptName"
						:show-overflow-tooltip="true"
						/>
						<el-table-column
						label="手机号码"
						align="center"
						key="phonenumber"
						prop="phonenumber"
						width="120"
						/>
					</el-table>

					<pagination
						v-show="total > 0"
						:total="total"
						:page.sync="queryParams.pageNum"
						:limit.sync="queryParams.pageSize"
						@pagination="getUserList"
					/>
				</el-form>
			</el-col>
		</el-row>
		
	</div>
</template>

<script>
import { mapGetters } from "vuex";
import { treeselect } from "@/api/system/dept";
import { listUser } from "@/api/system/user";
import { addSendsms } from "@/api/system/sendsms";
export default {
  data() {
    return {
      form: {},
      info: {
        realName: "张三",
        name: "未命名",
        time: "2022-05-03 10:00:00 - 13:00:00",
        id: "123456789",
      },
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentCheckData: {}, // 当前选中的值
      userList: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
      },
      selected_user_nums: [],
      smsInfo: {
        status: 0,
        masterId: 0,
        smsContent: "",
        beginTime: "",
        receiveMembers: "",
      },
    };
  },
  computed: {
    ...mapGetters(["userId"]),
    ...mapGetters(["userObj"]),
  },
  created() {
    this.loadTreedata();
    this.getUserList();
  },
  methods: {
    backRoom() {
      this.$router.push("/index");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selected_user_nums = selection.map((item) => item.phonenumber);
      console.log(this.selected_user_nums);
    },
    handleCancel() {
      this.centerDialogVisible = false;
    },
    // 发送手机短信 
    handleSendRequest() {
      if (this.selected_user_nums.length == 0) {
        this.$message({
          message: "没有选择人员",
          type: "warning",
        });
        return;
      }
      if (
        this.smsInfo.smsContent == "" 
      ) {
        this.$message({
          message: "请填写发送内容",
          type: "warning",
        });
        return;
      }
      this.smsInfo.masterId = this.userId;
      this.smsInfo.receiveMembers = this.selected_user_nums.toString(); 
      addSendsms(this.smsInfo).then((response) => {
        console.log(response);
        this.$message({
          message: "短信已发送",
          type: "success",
        });
        this.backRoom();
      });
    },
    
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getUserList();
    },
    /** 查询用户列表 */
    getUserList() {
      listUser(this.queryParams).then((response) => {
        this.userList = response.rows;
        this.total = response.total;
      });
    },
    // treeCheck(nodeObj, selectObj) {
    treeCheck(data) {
      if (this.currentCheckData.id === data.id) {
        this.currentCheckData = {};
        this.$refs.tree.setCheckedKeys([]);
      } else {
        this.currentCheckData = data;
        this.$refs.tree.setCheckedKeys([data.id]);
      }
      this.queryParams.deptId = this.currentCheckData.id;
      this.getUserList();
    },
    loadTreedata() {
      treeselect({}).then((response) => {
        this.treeData = response.data;
      });
    },
  },
};
</script>
<style scoped>
.app-container {
  height: calc(100vh - 50px);
  overflow-x: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-box {
  overflow-x: hidden;
  height: calc(100vh - 230px);
}

.video-box div {
  float: left;
}

.video-box .all {
  border: 1px solid #ccc;
  width: calc(310px - 20px);
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
}

.btn-box {
  position: fixed;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
